<template>
	<view class="main_bgc">
		<view class="title">还款指南</view>
		<view class="title-xiao">
			<img src='../../static/xin/Slice 6@2x.png' />
			新手必读，借款还款不迷路
			<img src='../../static/xin/Slice 7@2x.png' />
		</view>
		<!--  -->
		<view class="details">
			<view class="details_title">“新手上路、疑问很多?”</view>
			<view class="details_del">
				<view>有关极享客的使用很多小伙伴还搞不清楚。</view>
				<view>今天小编就来详细给大家讲讲，极享客的借还款怎么操作!</view>
			</view>
		</view>
		<!--  -->
		<view class="loan">
			<view class="loan_title">
				<img src='../../static/xin/Slice 12@2x.png' />
				借款篇
				<img src='../../static/xin/Slice 13@2x.png' />
			</view>
			<view v-for="item in loanList" class="loan_item">
				<view class="loan_item_title">{{item.title}}</view>
				<view class="fgt"></view>
				<view v-for="ele in item.list" class="loan_item_list">
					<view>
						<text>{{ele.id}}</text>{{ele.text}}
					</view>
					<!-- 步骤条 -->
					<view class="developmentbuzhou">
						<view class="development_tiao"></view>
						<view class="development_yuan"></view>
						<view class="development_tiao"></view>
					</view>
				</view>

			</view>
		</view>

		<view class="repayment">
			<view class="repayment_title">还款篇</view>
			<view v-for="item in repaymentList" class="repayment_item">
				<view class="repayment_item_title">{{item.title}}</view>
				<view class="fgt"></view>
				<view v-for="ele in item.list" class="repayment_item_list">
					<view>
						<text>{{ele.id}}</text>{{ele.text}}
					</view>

					<!-- 步骤条 -->
					<view class="developmentbuzhou">
						<view class="development_tiao"></view>
						<view class="development_yuan"></view>
						<view class="development_tiao"></view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				loanList: [{
						title: '产品类型一',
						list: [{
							id: '01',
							text: '登录极享客APP'
						}, {
							id: '02',
							text: '申请在线借款'
						}, {
							id: '03',
							text: '填写借款信息'
						}, {
							id: '04',
							text: '审核通过'
						}]
					},
					{
						title: '产品类型二',
						list: [{
							id: '01',
							text: '登录极享客APP'
						}, {
							id: '02',
							text: '申请合作借款产品'
						}, {
							id: '03',
							text: '填写借款信息'
						}, {
							id: '04',
							text: '等待信贷员电话审核'
						}, {
							id: '05',
							text: '审核通过并放款'
						}]
					},
					{
						title: '产品类型三',
						list: [{
							id: '01',
							text: '登录极享客APP'
						}, {
							id: '02',
							text: '选择合作方借款产品'
						}, {
							id: '03',
							text: '下载合作方APP'
						}, {
							id: '04',
							text: '申请成功并放款'
						}]
					}
				],
				repaymentList: [{
						title: '产品类型一',
						list: [{
							id: '01',
							text: '登录极享客APP'
						}, {
							id: '02',
							text: '进入还款页面'
						}, {
							id: '03',
							text: '申请还款'
						}]
					},
					{
						title: '产品类型二',
						list: [{
							id: '01',
							text: '登录放款产品APP'
						}, {
							id: '02',
							text: '进入还款页面'
						}, {
							id: '03',
							text: '申请收款'
						}]
					},
				]

			}
		},
		methods: {

		}
	}
</script>

<style>
	.main_bgc {
		width: 752rpx;
		height: 3400rpx;
		background: linear-gradient(180deg, #DAE8FF 0%, #FFFFFF 58%, #FFFFFF 99%);

		.title {
			height: 62rpx;
			font-weight: 400;
			font-size: 52rpx;
			color: #264DD8;
			line-height: 61rpx;
			text-align: center;
			margin: 0 auto;
			padding-top: 54rpx;
		}

		.title-xiao {
			height: 40rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #5D77FF;
			line-height: 33rpx;
			text-align: center;
			margin: 0 auto;
			padding-top: 12rpx;
			margin-bottom: 30rpx;

			img {
				vertical-align: middle;
				margin-left: 30rpx;
				height: 40rpx;
				margin-right: 20px;
			}
		}

		.details {
			width: 700rpx;
			height: 350rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			background-image: url('../../static/Slice 11@2x.png');
			background-size: contain;
			background-repeat: no-repeat;
			margin-bottom: 25rpx;
			margin-left: 30rpx;

			.details_title {
				width: 580rpx;
				height: 44rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #264DD8;
				line-height: 38rpx;
				margin: 0 auto;
				padding-top: 90rpx;
				padding-bottom: 10rpx;
			}

			.details_del {
				width: 578rpx;
				height: 68rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				line-height: 40rpx;
				padding-left: 60rpx;
				margin-top: 30rpx;
				/* letter-spacing: 1rpx; */
			}
		}

		.loan {
			width: 680rpx;
			height: 1800rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 20rpx 0rpx rgba(146, 184, 241, 0.8);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin: 0 auto;

			.loan_title {
				/* width: 96rpx; */
				height: 44rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #264DD8;
				line-height: 38rpx;
				margin: 0 auto;
				padding: 40rpx;
				text-align: center;

				img {
					height: 22rpx;
					margin-left: 20rpx;
					margin-right: 20rpx;
				}

			}

			.loan_item {
				margin-bottom: 50rpx;
				padding-left: 80rpx;

				.fgt {
					border-bottom: 2rpx solid #ccc;
					position: relative;
					left: -40rpx;
				}

				.loan_item_title {
					width: 570rpx;
					height: 40rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #264DD8;
					line-height: 33rpx;
					text-align: left;
					padding-bottom: 16rpx;
					/* border-bottom: 2rpx solid #ccc; */
				}

				.loan_item_list {
					/* padding: 30rpx 0 0 0; */
					margin: 30rpx 0 0 0;
					width: 500rpx;
					height: 68rpx;
					background: #F4F8FF;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 2rpx solid #DCE6FF;
					line-height: 68rpx;
					padding-left: 40rpx;
					/* margin-left: 820rpx; */

					text {
						font-size: 28rpx;
						color: #264DD8;
						font-weight: Bold;
						margin-right: 10rpx;
					}
				}
			}
		}


		.repayment {
			width: 680rpx;
			height: 920rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 20rpx 0rpx rgba(146, 184, 241, 0.8);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin: 0 auto;
			margin-top: 32rpx;

			.repayment_title {
				width: 96rpx;
				height: 44rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #264DD8;
				line-height: 38rpx;
				margin: 0 auto;
				padding: 40rpx;

			}

			.repayment_item {
				margin-bottom: 50rpx;
				padding-left: 80rpx;

				.fgt {
					border-bottom: 2rpx solid #ccc;
					position: relative;
					left: -35rpx;
				}

				.repayment_item_title {
					width: 570rpx;
					height: 40rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #264DD8;
					line-height: 33rpx;
					text-align: left;
					padding-bottom: 16rpx;
					/* border-bottom: 2rpx solid #ccc; */
				}

				.repayment_item_list {
					/* padding: 30rpx 0 0 0; */
					margin: 30rpx 0 0 0;
					width: 520rpx;
					height: 68rpx;
					background: #F4F8FF;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 2rpx solid #DCE6FF;
					line-height: 68rpx;
					padding-left: 40rpx;

					text {
						font-size: 28rpx;
						color: #264DD8;
						font-weight: Bold;
						margin-right: 10rpx;
					}
				}
			}
		}




	}


	.developmentbuzhou {
		/* 	position: absolute;
		top: 648rpx;
		left: 73rpx; */
		position: relative;
		top: -85rpx;
		left: -75rpx;
		display: flex;
		flex-direction: column;
		justify-items: center;
		width: 14rpx;
		align-items: center;

		.development_yuan {
			width: 14rpx;
			height: 14rpx;
			background: #264DD8;
			border-radius: 7rpx;
		}

		.development_tiao {
			width: 2rpx;
			height: 45rpx;
			background: #DEE2FA;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}
	}
</style>